import React, { Component } from 'react'
import './App.css'
import { NavLink, withRouter } from 'react-router-dom'
import Router from './router'

class App1 extends Component {
  jump(url) {
    console.log(this.props);
    // 复杂的功能通过编程式导航实现
    this.props.history.push(url+'?age=18&name=Tom')
    // replace 替换url中的历史记录，而不是新增一条
    // this.props.history.replace(url)
    // go 正数就前进，负数就后退
    // this.props.history.go(-1)
    // goBack() 后退
    // goForward() 前进
  }
  render() {
    return (
      <div>
        {/* 带有路由的App */}
        <Router></Router>
        {/* 声明式导航 */}
        <NavLink exact to="/" activeClassName="act">首页</NavLink><br />
        <NavLink to="/login?age=18&name=Tom" activeClassName="act">login</NavLink><br />
        <NavLink to="/reg" activeClassName="act">reg</NavLink><br /><br /><br />
        {/* 编程式导航 */}
        <button onClick={()=>this.jump('/')}>首页</button>
        <button onClick={()=>this.jump('/login')}>login</button>
        <button onClick={()=>this.jump('/reg')}>reg</button>
        <button onClick={()=>this.jump('/list')}>list</button>
      </div>
    )
  }
}

// 处理非路由组件，通过withRoute方法，添加路由的属性和方法
const App = withRouter(App1);
export default App
